
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
		
		input{font-size:26px;margin-top: 20px;}
			#mytank{position: absolute;left:10px;top:100px}
		
        body {
			background-image: url(images/grassland.png);
		}
    </style>
</head>
 
<body>
    <img id="mytank" src="images/right.png" alt="">
    <script>
		//199000933  黎雪娅
        var mystank = document.querySelector('img') // 获取图片
        var style = getComputedStyle(mystank)// 获取图片的属性
		// 记录图片的初始位置
        var L = parseInt(style.left)
        var T = parseInt(style.top)
		
        // 绑定键盘按下事件
        window.onkeydown = function(e) {
            console.log(e.key);
            // 判断方向键
            switch(e.key) {
                //按下上方向键
                case 'ArrowUp':
                    // 改变图片的src地址，控制转向
                    mystank.src = 'images/up.png'
                    // 目标位置 = 初始位置 - 每次移动距离（这里设为10px）
                    T = T - 30
                    // 改变图片的top距离，控制移动
                    mystank.style.top = T + 'px'
					if(parseInt(mytank.style.top)-45<0){
						alert("不能再往上走啦")
						return
					}
                    break;
					
					
                case 'ArrowDown':
                    mystank.src = 'images/down.png'
                    T = T + 30
                    mystank.style.top = T + 'px'
				    if(parseInt(mytank.style.top)+40>document.documentElement.clientHeight-58){
						alert("不能再往下走了")
						return
					}
					break;
					
					
                case 'ArrowLeft':
                    mystank.src = 'images/left.png'
                    L = L - 30
                    mystank.style.left = L + 'px'
					if(parseInt(mytank.style.left)-40<0){
						alert("不能再往左边走了")
						return
						}
                    break;
					
					
                case 'ArrowRight':
                    mystank.src = 'images/right.png'
                    L = L + 30
                    mystank.style.left = L + 'px'
					if(parseInt(mytank.style.left)+40>document.documentElement.clientWidth-85){
						alert("不能再往右边走了");
					    return;
						}
                    break;
            }
        }
    </script>
</body>
 
</html>